<template>

    <div class="body">
    
        <div class="raw">
            <div class="do" v-for ="item in Doctor" :key="item.Sid">
                <!-- <div style="height:70%" v-for ="(itemm,index) in imgs" :key="index" v-if="item.Sid===itemm.id"> -->
                <div style="height:70%">
                    <!-- {{item.picture}} -->
                    <img :src="require('../static/doctor/'+item.picture)" class="photo">
                    <!-- <img :src="itemm.imgUrl" class="photo"> -->
                </div>
                <div class="introduce" ref="doctor">
                    <div class="namebk">
                        <!-- {{item.picture}} -->
                        <span class="name">{{item.SoName}}</span>
                    </div>
                    <div class="jj">
                        <span class="zc">{{item.Sojian}}</span><br>
                        <span class="zc">{{item.SoAge}} age</span>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
      
    </template>
    
    <script>
    import axios from "axios"
    
    export default {
        data(){
            return{ 
                Doctor:[],
                picture1:[],
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
          getList(){
            axios.get("http://localhost:3000/api/petdoctor")
            .then(res =>{
                this.Doctor = res.data;
            })
          }
        }
    }
    </script>
    
    <style scoped>
    
    .body{
        width: 96%;
        height: 40rem;
        /* background-color: #ffffff; */
        margin: 0rem auto;
        margin-top: 2rem;
    }
    
    .raw{
        height: 88%;
        width: 95%;
        display: flex;
        margin: 0 auto;
        flex-direction: row;
        /* background-color: pink; */
    }
    
    .do{
        height: 35rem;
        width: 24%;
        background-color: #ffffff;
        margin: 2rem 2%;
    }
    
    .photo{
        height: 100%;
        width: 100%;
        /* background-image: url(../assets/images/doctor/staff-1.jpg); */
        background-size: 100% 100%;
        /* background-position: 95% 10%; */
        /* background-size: 100% 102%; */
        position: relative;
        /* top: 2%; */
        /* background-image: url(../assets/images/doctor/staff-1.jpg); */
    }
    
    .introduce{
        height: 30%;
        width: 100%;
        /* margin-top: 20%; */
        /* line-height: 30%; */
        background-color: #ffffff;
        overflow: hidden;
    }
    .introduce:hover{
        /* height: 30%;
        width: 100%; */
        color: #ffffff;
        background-color: #00bd56;
    }
    .namebk{
        /* height: 20%; */
        /* line-height: 20%; */
        margin-top: 10%;
        width: 100%;
        text-align: center;
    }
    .jj{
        margin-top: 2%;
        text-align: center;
    }
    .name{
        /* margin-top: 10%; */
        font-size: 1.5rem;
        /* padding-top: 50%; */
    }
    
    .introduce .zc{
        width: 31%;
        font-size: 1.1rem;
        margin: auto;
        padding-top: 5%;
    }
    
    @media screen and (max-width:768px){
        .raw{
            height: 88%;
            width: 95%;
            display: flex;
            margin: 0 auto;
            flex-direction: row;
            word-wrap: break-word;
        }
        .do{
            height: 10rem;
            margin: 0.1rem auto;
        }
        .name{
            font-size: 0.01px;
        }
        .introduce .zc{
            font-size: 0.1px;
        }
        .body{
            width: 100%;
            margin: 0;
            height: 12rem;
        }
    }
    @media screen and (max-width:992px) and (min-width:768px){
        .raw{
            height: 88%;
            width: 95%;
            display: flex;
            margin: 0 auto;
            flex-direction: row;
            word-wrap: break-word;
        }
        .do{
            height: 18rem;
            margin: 1rem auto;
        }
        .name{
            font-size: 0.01px;
        }
        .introduce .zc{
            font-size: 0.1px;
        }
        .body{
            width: 100%;
            margin: 0;
            height: 20rem;
        }
    }
    #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  background-color: #f3f4f7;
}


nav a.router-link-exact-active {
  color: pink;
}

.link{
  margin:0rem 2%;
  position: relative;
  /* top: 2.5rem; */
  font-size: 1.3rem;
  text-align: center;
  text-decoration:none;
  /* overflow: hidden; */
}

.nav{
  height: 100%;
  text-align: center;
}
.linknav{
    /* width: 100%; */
    background: #fff;
    /* 避免由内边距撑开容器本身大小的问题 */
    box-sizing: border-box;
    padding: 10px;
    /* overflow: scroll; */
    /* position: relative;
    bottom: 10rem; */
}
#btn{
      float: right;
      width: 120px;
      height: 40px;
      background-color: red;
}

@media screen and (max-width:768px){
    /* 手机屏幕 */
    .linknav{
      /* padding: 0.1px; */
      width: 100%;
      /* word-spacing: normal; */
      word-wrap: break-word;
      width: 100%;
      /* margin:0rem 5%; */
      /* margin: 0px 1rem; */
    }
    .link{
      /* word-wrap: break-all; */
      font-size: 1px;
      padding-left: 10px;
      /* margin: 0; */
    }
}
@media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */
    .linknav{
      padding: 12px;
      width: 100%;
      /* word-spacing: normal; */
      word-wrap: break-word;
      width: 100%;
      /* background-color: black; */
      /* margin: 0px 1rem; */
    }
}
    </style>